<template>
  <div class="zoom-toolbar">
    <span v-if="showLabel" class="zoom-label">缩放:</span>
    <el-button-group size="small">
      <el-button @click="zoomOut" :disabled="zoomLevel <= min">
        <el-icon><ZoomOut /></el-icon>
      </el-button>
      <el-dropdown trigger="click" @command="handleZoomPreset">
        <el-button>{{ Math.round(zoomLevel * 100) }}%</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="0.25">25%</el-dropdown-item>
            <el-dropdown-item command="0.5">50%</el-dropdown-item>
            <el-dropdown-item command="0.75">75%</el-dropdown-item>
            <el-dropdown-item command="1" divided>100% (实际大小)</el-dropdown-item>
            <el-dropdown-item command="1.25">125%</el-dropdown-item>
            <el-dropdown-item command="1.5">150%</el-dropdown-item>
            <el-dropdown-item command="2">200%</el-dropdown-item>
            <el-dropdown-item command="fit" divided>适合屏幕</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button @click="zoomIn" :disabled="zoomLevel >= max">
        <el-icon><ZoomIn /></el-icon>
      </el-button>
    </el-button-group>
    <el-button v-if="showFitButton" size="small" @click="$emit('fit')" class="fit-btn">
      <el-icon><FullScreen /></el-icon>
      适合屏幕
    </el-button>
  </div>
</template>

<script setup>
import { ZoomIn, ZoomOut, FullScreen } from '@element-plus/icons-vue'

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  zoomLevel: {
    type: Number,
    default: 1
  },
  min: {
    type: Number,
    default: 0.1
  },
  max: {
    type: Number,
    default: 3
  },
  step: {
    type: Number,
    default: 0.1
  },
  showLabel: {
    type: Boolean,
    default: true
  },
  showFitButton: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['zoom-in', 'zoom-out', 'zoom-to', 'fit'])

const zoomIn = () => {
  emit('zoom-in')
}

const zoomOut = () => {
  emit('zoom-out')
}

const handleZoomPreset = (command) => {
  if (command === 'fit') {
    emit('fit')
  } else {
    emit('zoom-to', parseFloat(command))
  }
}
</script>

<style lang="scss" scoped>
.zoom-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .zoom-label {
    font-size: 12px;
    color: #606266;
    margin-right: 4px;
  }
  
  .fit-btn {
    margin-left: 8px;
  }
}
</style>